<template>
  <li
    :class="`${prefixCls}-item-group`"
  >
    <div
      v-if="title"
      :class="`${prefixCls}-item-group-title`"
      :style="style"
      v-text="title"
    />
    <ul
      v-if="$slots.default"
      :class="`${prefixCls}-item-group-list`"
    >
      <slot />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MdsMenuItemGroupLocal',
  inject: ['menuRoot'],
  props: {
    title: String
  },
  _parent: null,
  data() {
    return {
      prefixCls: this.menuRoot.prefixCls
    }
  },
  computed: {
    style() {
      const res = {}
      if (this.mode === 'inline' && this.level > 0) {
        res['padding-left'] = (this.level + 1) * this.inlineIndent + 'px'
      }
      return res
    },
    mode() {
      return this.$options._parent.mode
    },
    multiple() {
      return this.$options._parent.multiple
    },
    level() {
      return this.$options._parent.level
    },
    inlineIndent() {
      return this.$options._parent.inlineIndent
    },
    path() {
      return this.$options._parent.path.slice()
    },
    selected() {
      return this.$options._parent.selected
    },
    handleClickItem() {
      return this.$options._parent.handleClickItem
    },
    handleSelect() {
      return this.$options._parent.handleSelect
    },
    handleDeSelect() {
      return this.$options._parent.handleDeSelect
    },
    handleOpenChange() {
      return this.$options._parent.handleOpenChange
    }
  },
  created() {
    this.$options._parent = this.$parent
    while (!this.$options._parent.mode) {
      this.$options._parent = this.$options._parent.$parent
    }
  }
}
</script>
